import React, {Component} from 'react';
import {StyleSheet, TextInput} from 'react-native';
import {Button, Dialog, Text, TouchableOpacity, View} from 'react-native-ui-lib';
import {commonStyles} from '../../configs/commonStyle';
import {Icon} from '../components';
import BasePage from '../BasePage';

/**
 * 评论
 */
export default class ReplyDialog extends BasePage {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            remark: '',
        };
    }

    show = (remark) => {
        this.setState({isOpen: true, remark});
    };

    dismiss = () => {
        this.setState({isOpen: false});
    };

    renderPannableHeader = props => {
        return (
            <View>
                <View margin-10 row centerV spread>
                    <View flex centerV>
                        <Text style={{...commonStyles.text_black_17}}>备注信息</Text>
                    </View>
                    <TouchableOpacity onPress={this.dismiss}>
                        <Icon type="AntDesign" name={'close'} size={16} color={'#282828'}/>
                    </TouchableOpacity>
                </View>
                <View height={1} bg-line/>
            </View>
        );
    };

    onSend=()=> {
        const { remark} = this.state;
        if(IsNullOrEmpty(remark))
        {
            this.showToast('评论不能为空')
            return;
        }
        this.props.callBack && this.props.callBack(remark);
        this.dismiss();
    }

    render() {
        const {isOpen, remark} = this.state;
        return (
            <Dialog
                migrate
                width={'100%'}
                bottom
                overlayBackgroundColor={'transparent'}
                containerStyle={styles.roundedDialog}
                visible={isOpen}
                onDismiss={this.dismiss}
            >
                <View padding-10 row centerV>

                    <TextInput placeholder={'请输入回复内容'}
                               value={remark}
                               onChangeText={remark=>this.setState({remark})}
                               style={styles.textInput}/>

                    <Button label={'发送'}
                            size={'xSmall'}
                            onPress={this.onSend}
                            bg-primary
                            style={{height:35,borderRadius:5,}}
                    />
                </View>
            </Dialog>
        );
    }
}

const styles = StyleSheet.create({
    roundedDialog: {
        backgroundColor: '#F7F7F7',
    },
    textInput: {
        flex: 1,
        padding: 10,
        height: 35,
        ...commonStyles.text_black_14,
        backgroundColor: 'white',
        borderRadius: 5,
        justifyContent: 'center',
        marginRight: 10,
    },
});


